<script src="#(CPATH)/static/components/ckeditor5/ckeditor.js"></script>
<script>
    function initCKEdtior5(selector) {
        ClassicEditor
            .create(document.querySelector(selector), {
                fontSize: {
                    options: [
                        9,
                        11,
                        13,
                        'default',
                        17,
                        19,
                        21,
                        22,
                        24,
                        26,
                        28,
                        30,
                        36,
                        48,
                    ]
                },
                fontFamily: {
                    options: [
                        'default',
                        '宋体',
                        '黑体',
                        '仿宋, 仿宋_GB2312',
                        '楷体,楷体_GB2312',
                        '幼圆',
                        '微软雅黑',
                        '宋体隶书,隶书',
                        'Arial',
                        'Helvetica',
                        'sans-serif',
                        'Times New Roman, Times, serif',
                        'Verdana',

                    ],
                    supportAllValues: true
                },
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'link',
                        'code',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'fontFamily',
                        'fontSize',
                        'fontColor',
                        'fontBackgroundColor',
                        'outdent',
                        'indent',
                        'alignment',
                        'removeFormat',
                        '|',
                        'blockQuote',
                        'imageInsert',
                        'insertTable',
                        'codeBlock',
                        '|',
                        'undo',
                        'redo',
                        '|',
                        'sourceEditing'
                    ]
                },
                simpleUpload: {
                    uploadUrl: getContextPath() + '/commons/ckeditor5/upload',
                },
                language: 'zh-cn',
                image: {
                    toolbar: [
                        'imageTextAlternative',
                        'imageStyle:alignBlockLeft',
                        'imageStyle:alignBlockRight',
                        'imageStyle:block',
                        'imageStyle:inline',
                        'imageStyle:side',
                        'imageStyle:alignLeft',
                        'imageStyle:alignRight',

                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells',
                        'tableProperties',
                        'tableCellProperties'
                    ]
                },
                htmlSupport: {
                    allow: [{
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                    },
                        {
                            name: "svg",
                            attributes: true,
                            classes: true,
                            styles: true
                        }, {
                            name: "animateTransform",
                            attributes: true,
                            classes: true,
                            styles: true
                        }

                    ]
                    // disallow: [ /* HTML features to disallow */ ]
                }
            })
            .then(editor => {
                window.currentCKEditor5 = editor;
            })
            .catch(error => {
                console.log(error);
            });
    }


    initCKEdtior5('#editor');


    window.insertImageToEditor = function (src, title) {
        var img = document.createElement('img') // 添加的内容可以自定义， 这里以添加图片为例
        img.setAttribute('src', src)
        img.setAttribute('alt', title)
        insertHtmlToEditor(img.outerHTML);
    }


    window.insertVideoToEditor = function (src, title) {
        var video = document.createElement('video') // 添加的内容可以自定义， 这里以添加图片为例
        video.setAttribute('src', src)
        video.setAttribute('style', 'max-width:100%;')
        video.setAttribute('controls', 'controls')

        insertHtmlToEditor(video.outerHTML);
    }

    window.insertAttachementToEditor = function (src, title) {
        var a = document.createElement('a') // 添加的内容可以自定义， 这里以添加图片为例
        a.setAttribute('href', src)
        a.setAttribute("target", "_blank")
        a.innerHTML = title;
        insertHtmlToEditor('<p class="attachment-item">附件：' + a.outerHTML + "</p>");
    }

    window.insertHtmlToEditor = function (html) {
        const viewFragment = currentCKEditor5.data.processor.toView(html);
        const modelFragment = currentCKEditor5.data.toModel(viewFragment);
        currentCKEditor5.model.insertContent(modelFragment, currentCKEditor5.model.document.selection);
    }

    window.onEditorSubmitBefore = function () {
        $("#content").val(window.currentCKEditor5.getData());
    }

</script>